import 'package:flutter/material.dart';
import 'package:flutter_application_testview/fitness_app/fitness_app_theme.dart';
import 'package:flutter_application_testview/fitness_app/ui_view/wave_view.dart';
import 'package:flutter_application_testview/main.dart';
import 'package:flutter_application_testview/model/heartRate_data.dart';
import 'package:provider/provider.dart';

// class WaterView extends StatefulWidget {
//   const WaterView(
//       {Key? key, this.mainScreenAnimationController, this.mainScreenAnimation})
//       : super(key: key);

//   final AnimationController? mainScreenAnimationController;
//   final Animation<double>? mainScreenAnimation;

//   @override
//   _WaterViewState createState() => _WaterViewState();
// }
class WaterView extends StatefulWidget {

  final AnimationController mainScreenAnimationController;
  final Animation<double> mainScreenAnimation;

  // 2. 构造函数（Dart 2.17+ 推荐写法）
  const WaterView({
    // 必需参数
  
    required this.mainScreenAnimationController,
    required this.mainScreenAnimation,

    // 可选参数
    Key? key, // 必须放在最后
  }) : super(key: key);

  @override
  _WaterViewState createState() => _WaterViewState();
}

class _WaterViewState extends State<WaterView> with TickerProviderStateMixin {
  Future<bool> getData() async {
    await Future<dynamic>.delayed(const Duration(milliseconds: 50));
    return true;
  }

  late AnimationController mainScreenAnimationController;
  late Animation<double> mainScreenAnimation;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    mainScreenAnimationController = widget.mainScreenAnimationController;
    mainScreenAnimation = widget.mainScreenAnimation;

    mainScreenAnimationController.forward();
  }

  @override
  Widget build(BuildContext context) {
     // 在任何子组件中访问
final heartRateData = Provider.of<HeartRateData>(context, listen: false);
    return AnimatedBuilder(
      animation: widget.mainScreenAnimationController!,
      builder: (BuildContext context, Widget? child) {
        return FadeTransition(
          opacity: widget.mainScreenAnimation!,
          child: Transform(
            transform: Matrix4.translationValues(
              0.0,
              30 * (1.0 - widget.mainScreenAnimation!.value),
              0.0,
            ),
            child: Padding(
              padding: const EdgeInsets.only(
                left: 24,
                right: 24,
                top: 16,
                bottom: 18,
              ),
              child: Container(
                decoration: BoxDecoration(
                  color: FitnessAppTheme.white,
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(8.0),
                    bottomLeft: Radius.circular(8.0),
                    bottomRight: Radius.circular(8.0),
                    topRight: Radius.circular(68.0),
                  ),
                  boxShadow: <BoxShadow>[
                    BoxShadow(
                      color: FitnessAppTheme.grey.withOpacity(0.2),
                      offset: const Offset(1.1, 1.1),
                      blurRadius: 10.0,
                    ),
                  ],
                ),
                child: Padding(
                  padding: const EdgeInsets.only(
                    top: 16,
                    left: 16,
                    right: 16,
                    bottom: 16,
                  ),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Column(
                          children: <Widget>[
                            Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        left: 4,
                                        bottom: 3,
                                      ),
                                      child: Text(
                                        heartRateData.devicesName
                                            .toString(),
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                          fontFamily: FitnessAppTheme.fontName,
                                          fontWeight: FontWeight.w600,
                                          fontSize: 20,
                                          color: FitnessAppTheme.nearlyDarkBlue,
                                        ),
                                      ),
                                    ),

                                    // Padding(
                                    //   padding: const EdgeInsets.only(
                                    //       left: 8, bottom: 8),
                                    //   child: Text(
                                    //     'ml',
                                    //     textAlign: TextAlign.center,
                                    //     style: TextStyle(
                                    //       fontFamily: FitnessAppTheme.fontName,
                                    //       fontWeight: FontWeight.w500,
                                    //       fontSize: 18,
                                    //       letterSpacing: -0.2,
                                    //       color: FitnessAppTheme.nearlyDarkBlue,
                                    //     ),
                                    //   ),
                                    // ),
                                  ],
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(
                                    left: 4,
                                    top: 2,
                                    bottom: 14,
                                  ),
                                  child: Text(
                                    'MAC: ${heartRateData.devicesMac}',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                      fontFamily: FitnessAppTheme.fontName,
                                      fontWeight: FontWeight.w500,
                                      fontSize: 14,
                                      letterSpacing: 0.0,
                                      color: FitnessAppTheme.darkText,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                left: 4,
                                right: 4,
                                top: 8,
                                bottom: 16,
                              ),
                              child: Container(
                                height: 2,
                                decoration: BoxDecoration(
                                  color: FitnessAppTheme.background,
                                  borderRadius: const BorderRadius.all(
                                    Radius.circular(4.0),
                                  ),
                                ),
                              ),
                            ),

                            // Padding(
                            //   padding: const EdgeInsets.only(top: 16),
                            //   child: Column(
                            //     mainAxisAlignment: MainAxisAlignment.center,
                            //     crossAxisAlignment: CrossAxisAlignment.end,
                            //     children: <Widget>[
                            //       Row(
                            //         mainAxisAlignment: MainAxisAlignment.start,
                            //         crossAxisAlignment:
                            //             CrossAxisAlignment.center,
                            //         children: <Widget>[
                            //           Padding(
                            //             padding: const EdgeInsets.only(left: 4),
                            //             child: Icon(
                            //               Icons.access_time,
                            //               color: FitnessAppTheme.grey
                            //                   .withOpacity(0.5),
                            //               size: 16,
                            //             ),
                            //           ),
                            //           Padding(
                            //             padding:
                            //                 const EdgeInsets.only(left: 4.0),
                            //             child: Text(
                            //               'Last drink 8:26 AM',
                            //               textAlign: TextAlign.center,
                            //               style: TextStyle(
                            //                 fontFamily:
                            //                     FitnessAppTheme.fontName,
                            //                 fontWeight: FontWeight.w500,
                            //                 fontSize: 14,
                            //                 letterSpacing: 0.0,
                            //                 color: FitnessAppTheme.grey
                            //                     .withOpacity(0.5),
                            //               ),
                            //             ),
                            //           ),
                            //         ],
                            //       ),
                            //       Padding(
                            //         padding: const EdgeInsets.only(top: 4),
                            //         child: Row(
                            //           mainAxisAlignment:
                            //               MainAxisAlignment.start,
                            //           crossAxisAlignment:
                            //               CrossAxisAlignment.center,
                            //           children: <Widget>[
                            //             SizedBox(
                            //               width: 24,
                            //               height: 24,
                            //               child: Image.asset(
                            //                   'assets/fitness_app/bell.png'),
                            //             ),
                            //             Flexible(
                            //               child: Text(
                            //                 'Your bottle is empty, refill it!.',
                            //                 textAlign: TextAlign.start,
                            //                 style: TextStyle(
                            //                   fontFamily:
                            //                       FitnessAppTheme.fontName,
                            //                   fontWeight: FontWeight.w500,
                            //                   fontSize: 12,
                            //                   letterSpacing: 0.0,
                            //                   color: HexColor('#F65283'),
                            //                 ),
                            //               ),
                            //             ),
                            //           ],
                            //         ),
                            //       ),
                            //     ],
                            //   ),
                            // )
                          ],
                        ),
                      ),

                      // SizedBox(
                      //   width: 34,
                      //   child: Column(
                      //     mainAxisAlignment: MainAxisAlignment.center,
                      //     crossAxisAlignment: CrossAxisAlignment.center,
                      //     children: <Widget>[
                      //       Container(
                      //         decoration: BoxDecoration(
                      //           color: FitnessAppTheme.nearlyWhite,
                      //           shape: BoxShape.circle,
                      //           boxShadow: <BoxShadow>[
                      //             BoxShadow(
                      //                 color: FitnessAppTheme.nearlyDarkBlue
                      //                     .withOpacity(0.4),
                      //                 offset: const Offset(4.0, 4.0),
                      //                 blurRadius: 8.0),
                      //           ],
                      //         ),
                      //         child: Padding(
                      //           padding: const EdgeInsets.all(6.0),
                      //           child: Icon(
                      //             Icons.add,
                      //             color: FitnessAppTheme.nearlyDarkBlue,
                      //             size: 24,
                      //           ),
                      //         ),
                      //       ),
                      //       const SizedBox(
                      //         height: 28,
                      //       ),
                      //       Container(
                      //         decoration: BoxDecoration(
                      //           color: FitnessAppTheme.nearlyWhite,
                      //           shape: BoxShape.circle,
                      //           boxShadow: <BoxShadow>[
                      //             BoxShadow(
                      //                 color: FitnessAppTheme.nearlyDarkBlue
                      //                     .withOpacity(0.4),
                      //                 offset: const Offset(4.0, 4.0),
                      //                 blurRadius: 8.0),
                      //           ],
                      //         ),
                      //         child: Padding(
                      //           padding: const EdgeInsets.all(6.0),
                      //           child: Icon(
                      //             Icons.remove,
                      //             color: FitnessAppTheme.nearlyDarkBlue,
                      //             size: 24,
                      //           ),
                      //         ),
                      //       ),
                      //     ],
                      //   ),
                      // ),
                     Padding(
  padding: const EdgeInsets.only(
    left: 16,
    right: 8,
    top: 16,
  ),
  child: Stack(
    alignment: Alignment.topCenter,
    children: [
      // 电池主体
      Container(
        width: 60,
        height: 160,
        decoration: BoxDecoration(
          color: HexColor('#e8e5e5'),
          borderRadius: BorderRadius.circular(15),
          boxShadow: [
            BoxShadow(
              color: FitnessAppTheme.grey.withOpacity(0.4),
              offset: const Offset(2, 2),
              blurRadius: 4,
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(15),
          child: WaveView(
            percentageValue: double.parse(heartRateData.devicesBattery.toString()),
            waveColor: _getWaveColor(double.parse(heartRateData.devicesBattery.toString())), // 新增颜色参数
          ),
        ),
      ),
      // 电池顶部凸起（颜色同步变化）
      Positioned(
        top: -4,
        child: Container(
          width: 20,
          height: 8,
          decoration: BoxDecoration(
            color: _getBatteryColor(double.parse(heartRateData.devicesBattery.toString())), // 颜色同步
            borderRadius: BorderRadius.circular(4),
            border: Border.all(
              color: _getBorderColor(double.parse(heartRateData.devicesBattery.toString())), // 边框颜色变化
              width: 1,
            ),
          ),
        ),
      ),
      // 电池边框（颜色同步变化）
      Container(
        width: 60,
        height: 160,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          border: Border.all(
            color: _getBorderColor(double.parse(heartRateData.devicesBattery.toString())),
            width: 2,
          ),
        ),
      ),
    ],
  ),
)
                    
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }


// 波浪颜色计算函数
Color _getWaveColor(double percentage) {
  assert(percentage >= 0 && percentage <= 100);
  if (percentage < 20) {
    return Colors.red[400]!;
  } else if (percentage < 60) {
    return Colors.yellow[400]!;
  } else {
    return const Color.fromARGB(255, 76, 245, 9);
  }
}

// 电池颜色计算函数
Color _getBatteryColor(double percentage) {
  if (percentage < 20) {
    return Colors.red[100]!;
  } else if (percentage < 60) {
    return Colors.yellow[100]!;
  } else {
    return Colors.green[100]!;
  }
}

// 边框颜色计算函数
Color _getBorderColor(double percentage) {
  if (percentage < 20) {
    return Colors.red[300]!.withOpacity(0.6);
  } else if (percentage < 60) {
    return Colors.yellow[700]!.withOpacity(0.6);  // 使用深黄色保证可见性
  } else {
    return Colors.green[300]!.withOpacity(0.6);
  }
}
}
